<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar .header {
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
    }
</style>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <div class="header">Right click action:</div>
    <div><input type="radio" value="annotate" data-bind="checked: rightClickAction">Annotate</div>
    <div><input type="radio" value="properties" data-bind="checked: rightClickAction">Print metadata</div>
    <div><input type="radio" value="zoom" data-bind="checked: rightClickAction">Zoom to feature</div>
    <div class="header">Middle click action:</div>
    <div><input type="radio" value="hide" data-bind="checked: middleClickAction">Hide feature</div>
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    viewer.scene.globe.depthTestAgainstTerrain = true;

    viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
    var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

    var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5741) });
    viewer.scene.primitives.add(tileset);

    tileset.readyPromise.then(function(){
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius / 4.0));
    });

</script>
</body>

</html>